.side-pane {
  width:auto !important;
  top: 50px !important;
  border: none !important;
  border-left: 2px solid lightgray !important;
}

.view-pane {
  border-top: 1px solid lightgray;
  background-color: white;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.pane-header {
/*    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;*/
    /*border-bottom: 1px solid #d3d3d3;*/
    /*border-top: 1px solid #d3d3d3;*/
    background: #5d5d5d;
}

.pane-content {
    flex-grow: 1;
    height: 100%;
    overflow: auto;
}

.pane-title {
  color: #e8e8e8;
}

.pane-title h1 {
  margin-top: 10px;
  margin-left: 10px;
  background-color: #fafafa;
}

.pane-title .menu-button {
  width: 24px;
  height: 24px;
  padding-bottom:0px
}

.pane-title .menu-button:hover {
  outline: none;
}

pre.history-item-code {
  overflow: auto;
  padding:3px;
  padding-left:8px;
  margin:0;
  background-color:rgb(250,250,250);
  /*border: 1px solid #ccc;*/
}

.history-item-output {
  overflow: auto;
  padding: 3px 8px;
  /*padding-left:8px;*/
  /*margin:0;*/
  /*background-color:rgb(250,250,250);*/
  border-bottom: 1px solid #666;
  border-top: 1px solid #ccc;
  /*border-left: 1px solid #ccc;*/
  /*border-right: 1px solid #ccc;*/
  word-break: break-all;
  line-height: 14px;
  font-family: Menlo, monospace;
  font-size: 11px;
  position: relative;
}

.history-metadata-positioner {
    height: 0px;
    position: sticky;
    top: 0px;
}

div.history-metadata {
    box-sizing: border-box;
    padding: 1px 1px 0px 1px;
    position: sticky;
    left: 100%;
    display: inline-block;
    background: #fff;
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #bbb;
    box-shadow: 5px 4px 5px rgba(136, 136, 136, 0.25);
}

.history-show-actual-cell {
    display: inline-block;
}

div.history-date {
  font-size: 11px;
  color: gray;
  transition: 50ms;
}

div.history-time-since {
  font-size: 11px;
  padding-right:3px;
  padding-left:6px;
  display: inline-block;
}

div.side-pane {
  z-index: 200;
  position: fixed;
  right: 0;
  top: 40px;
  border: 2px solid gray;
  border-right: none;
  width: 75%;
  overflow: auto;
  height: 100%;
  background-color: rgba(255, 255, 255);
}

i.close-side-pane:hover {
  outline: 1px solid lightgray;
}

div.frozen-variables {
  display: grid;
  grid-template-columns: minmax(100px, min-content) 100px;
  grid-column-gap: 0px;
}

div.frozen-variable-name {
  border: 1px solid #f1f1f1;
  background: #f9f9f9;
  font-family: monospace;
  padding-left:5px;
  padding-right:20px;
  overflow-wrap: break-word;
  max-width: calc(100% - 25px);
}

div.frozen-variable-value {
  border: 1px solid #f1f1f1;
  background: #f9f9f9;
  font-family: monospace;
  color:gray;
  justify-self: end;
  white-space: pre;
  padding-left:5px;
  padding-right:5px;
  width: 100%;
}

div.declared-variables-list {
padding: 15px;
}

div.declared-variable {
  padding-bottom: 15px;
}

div.declared-variable-name {
    font-size: 14px;
    font-family: monospace;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
    padding: 1px 10px;
    color: #000;
}

div.declared-variable-value {
  padding-left: 20px;
  overflow-x: auto;
}

div.app-info-message {
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 20px;
}

button.pane-button {
  width: 20px;
  height: 20px;
  border: 1px solid lightgray;
  border-radius: 2px;
  background-color: rgb(250,250,250);
}

.button-content-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

button.pane-button:hover {
  box-shadow: 0px 0px 3px rgba(0,0,0,.2);
  background-color: rgb(240,240,240);
}
